<template>
	<view class="com-content">
		<!--我的工作 列表状态-->
		<template v-if="page_type==='1'||page_type==='4'">
			<view class="com-body" @tap.stop="todetail(obj,page_type)">
				<!--店铺名-->
				<view class="box-title">
					<view class="box-title-l">
						<view class="box-title-l-tit">{{obj.site}}</view>
						<view class="icon-gd icons icon-gengduo"></view>
					</view>
					<view class="box-title-r" v-if="page_type==='1'" :style="{color:obj.status===1?'#15BC83':''}">
						{{obj.status===1?'进行中':''}}
					</view>
					<view class="box-title-r" v-else-if="page_type==='4'" :style="{color:obj.status===1?'#15BC83':obj.status===2?'#333':obj.status===3?'#333':'#FE5252'}">
						{{obj.status===1?'进行中':obj.status===2?'已完成':obj.status===3?'被删除':obj.status===4?'驳回':''}}
					</view>
				</view>
				<!--任务名-->
				<view class="box-name">
					<view class="box-name-l">
						<view class="box-name-l-tit">{{obj.task_name}}</view>
						<view class="box-name-l-txt" :style="{background:obj.type===2?'#15BC83':obj.type===1?'#FF943D':''}">
							{{obj.type===2?'道具':obj.type===1?'POP':''}}
						</view>
					</view>
					<view class="box-name-r">
						<view class="box-name-r-name">{{obj.user_name}}</view>
						<view class="box-name-r-txt">{{obj.create_time | ftime}}</view>
					</view>
				</view>
				<!--备注-->
				<view class="box-remack">备注：（{{obj.mark}}）</view>
				<!--金额-->
				<view class="box-money"><text class="box-money-rmb">¥</text>{{obj.price != null?obj.price:'0'}}</view>
			</view>
			<!--底部按钮-->
			<view class="box-foot" v-if="page_type==='1'||page_type==='3'||page_type==='4'" @click.stop="toOrder(obj.id,obj.type,obj.flow_path_id)">
				<view class="box-button">再下一单</view>
			</view>
		</template>
		<template v-else-if="page_type==='2'||page_type==='3'">
			<view class="com-body" @tap.stop="todetail(obj,page_type)">
				<!--店铺名-->
				<view class="box-title">
					<view class="box-title-l">
						<view class="box-title-l-tit">{{obj.orderInfo.site}}</view>
						<view class="icon-gd icons icon-gengduo"></view>
					</view>
					<view class="box-title-r" v-if="page_type==='2'"
						:style="{color:obj.orderInfo.status===1?'#999':'#FE5252'}">
						{{obj.orderInfo.status===1?'已读':'未读'}}
					</view>
					<view class="box-title-r" v-else-if="page_type==='3'"
						:style="{color:obj.orderInfo.status===1?'#333':'#15BC83'}">
						{{obj.orderInfo.status===1?'进行中':'已完成'}}
					</view>
				</view>
				<!--待审核-->
				<view class="box-name">
					<view class="box-name-l">
						<view class="box-name-l-tit">{{obj.orderInfo.task_name}}</view>
						<view class="box-name-l-txt"
							:style="{background:obj.orderInfo.type===2?'#15BC83':obj.orderInfo.type===1?'#FF943D':''}">
							{{obj.orderInfo.type===2?'道具':obj.orderInfo.type===1?'POP':''}}
						</view>
					</view>
					<view class="box-name-r">
						<view class="box-name-r-name">{{obj.orderInfo.user_name}}</view>
						<view class="box-name-r-txt">{{obj.orderInfo.create_time | ftime}}</view>
					</view>
				</view>
				<!--备注-->
				<view class="box-remack">备注：（{{obj.orderInfo.mark}}）</view>
				<!--金额-->
				<view class="box-money"><text
						class="box-money-rmb">¥</text>{{obj.orderInfo.price != null?obj.orderInfo.price:'0'}}</view>
				<!--底部按钮-->
				<view class="box-foot" v-if="page_type==='3' && (is_user === obj.orderInfo.uid)" @click.stop="toOrder(obj.order_id,obj.orderInfo.type,obj.flow_path_id)">
					<view class="box-button">再下一单</view>
				</view>
				<view class="box-foot2" v-else-if="page_type==='2' && obj.type === 1 && obj.status === 1">
					<view class="box-foot-l" v-if="obj.user.length>0">
						<block v-for="(ite,ind) in obj.user" :key="ind">
							<!--指派-->
							<view class="box-foot-l" @click.stop="todes(obj)">
								<image class="box-foot-l-img" :src="ite.img || $mAssetsPath.icon_mrtx"></image>
								<view class="box-foot-l-n" v-if="obj.user.length===1" >{{ite.nickname}}</view>
							</view>
						</block>
					</view>
					<!--供应商指派供应商成员-成员通过/驳回-->
					<view class="box-foot-l" v-else-if="(obj.user.length===0 && obj.next_user !== '') || (obj.user.length===0 && obj.next_type === 0)"></view>
					<view class="box-foot-l" v-else-if="obj.user.length===0 && obj.next_user === '' && obj.next_type !== 0 " @click.stop="todes(obj)">
						<view class="box-foot-l-b">+</view>
					</view>
					<!--通过 / 驳回-->
					<view class="box-foot-r">
						<view class="box-button-no" @click.stop="toreject(obj.id,obj.next_user,obj.next_type, obj.is_last)"
							:style="{border:obj.is_last?'1rpx solid #FE5252':'1rpx solid #999',color:obj.is_last?'#FE5252':'#999'}">
							{{obj.is_last?'结束':'驳回'}}
						</view>
						<view class="box-button" @click.stop="topost(obj.id,obj.next_user,obj.next_type)">通过</view>
					</view>
				</view>
				<view class="box-foot-c" v-else-if="page_type==='2' && obj.type === 2">抄送</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		assignUsers, //指派用户
	} from '@/common/api.js';
	import {
		parseTime
	} from '@/common/util'
	export default {
		name: "com-top",
		components: {},
		props: {
			is_user:{
				type:Number,
				default:0
			},
			obj: {
				type: Object,
				default () {
					return {
						title: '这是新闻标题这是新闻标题',
						head_img: '/static/data-img/data-tx.png',
						name: '张三',
						tag: '经理',
						time: '2021.2.9'
					}
				}
			},
			page_type: {
				type: String,
				default: ''
			}
		},
		// 过滤器
		filters: {
			ftime(value) {
				let t = ''
				if (!!value) {
					const times = value;
					t = times.split(" ")[0];
				}
				return t
			}
		},
		data() {
			return {

			}
		},
		methods: {
			parseTime,
			//驳回-结束
			toreject(id,next_user,next_type, btnType) {
				console.log(btnType)
				this.$emit("toreject",id,next_user,next_type,btnType);
			},
			//通过
			topost(id,next_user,next_type) {
				this.$emit("topost",id,next_user,next_type);
			},
			//再下一单
			toOrder(id,type,flow_path_id) {
				this.$emit("toOrder",id,type,flow_path_id)
			},
			todetail(row, page_type) {
				this.$emit("todetail", row, page_type)
			},
			todes(row) {
				console.log(2222, row)
				this.$emit("todes", row)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20rpx 30rpx;

		.box-name {
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box-name-l {
				display: flex;
				align-items: center;
				width: calc(100% - 270rpx);

				.box-name-l-tit {
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
					margin-right: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.box-name-l-txt {
					text-align: center;
					height: 32rpx;
					width: 80rpx;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: $font-color-w;
					border-radius: 4rpx;
					padding: 0 10rpx;
				}
			}

			.box-name-r {
				display: flex;
				justify-content: flex-end;
				width: 250rpx;
				display: flex;
				font-size: 22rpx;
				font-weight: 400;
				color: $font-color-9;
				margin-left: 20rpx;

				.box-name-r-name {
					text-align: right;
					display: flex;
					flex-direction: row-reverse;
					padding-right: 16rpx;
					width: calc(100% - 140rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.box-name-r-txt {
					display: flex;
					width: 140rpx;
					text-align: right;
				}
			}
		}

		.box-title {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box-title-l {
				display: flex;
				align-items: center;
				width: calc(100% - 120rpx);

				.box-title-l-tit {
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
					margin-right: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.icon-gd {
					color: $font-color-9;
				}
			}

			.box-title-r {
				display: flex;
				flex-direction: row-reverse;
				width: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: right;
			}
		}

		.box-remack {
			font-size: 24rpx;
			font-weight: 400;
			color: $font-color-9;
			line-height: 40rpx;
			/* overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -moz-box;
			-moz-line-clamp: 2;
			-moz-box-orient: vertical; */
		}

		.box-money {
			display: flex;
			justify-content: flex-end;
			font-size: 32rpx;
			font-weight: 400;
			color: #FE5252;
			border-bottom: 1rpx solid #F2F4F5;
			padding-bottom: 8rpx;
			margin-bottom: 18rpx;

			.box-money-rmb {
				margin-right: 6rpx;
			}
		}

		.box-foot {
			display: flex;
			justify-content: flex-end;

			.box-button {
				height: 46rpx;
				background: #198FFF;
				border-radius: 4rpx;
				padding: 0 16rpx;
				font-size: 24rpx;
				line-height: 46rpx;
				font-weight: 400;
				color: $font-color-w;
			}
		}

		.box-foot-c {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #999999;
		}

		.box-foot2 {
			display: flex;
			justify-content: space-between;

			.box-foot-l {
				display: flex;
				align-items: center;

				.box-foot-l-b {
					width: 46rpx;
					height: 46rpx;
					background: #198FFF;
					border-radius: 4rpx;
					color: #fff;
					line-height: 44rpx;
					text-align: center;
				}

				.box-foot-l-img {
					width: 46rpx;
					height: 46rpx;
					bborder-radius: 4rpx;
					margin-right: 14rpx;
				}

				.box-foot-l-n {
					font-size: 24rpx;
					font-weight: 400;
					color: $font-color-9;
				}
			}

			.box-foot-r {
				display: flex;


				.box-button {
					height: 46rpx;
					background: #198FFF;
					border-radius: 4rpx;
					padding: 0 16rpx;
					font-size: 24rpx;
					line-height: 46rpx;
					font-weight: 400;
					color: $font-color-w;
					margin-left: 30rpx;
				}

				.box-button-no {
					height: 46rpx;
					background: #fff;
					border-radius: 4rpx;
					padding: 0 16rpx;
					font-size: 24rpx;
					line-height: 46rpx;
					font-weight: 400;
				}
			}

		}
	}
</style>
